<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>jquery</title>
		<!-- <script src="JS/jquery.js" type="text/javascript"></script> -->
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
        <style>
            .red{
                color: red
            }
        </style>
    </head>
	<body>
		<h1 style="text-align: center;"><em>This is Jquery Test</em></h1>
        <div class="outdiv">
            <p>
                <div id="div01" class="mydiv" name="div01"><span>第一个div</span></div>
            </p>
            <p>
                <div id="div02" class="mydiv">第二个div</div>
            </p>
            <p>
                <input type="hidden" name="userid" value="1"/>
            </p>
            <p>
                <input type="checkbox" name="mylove" value="love1"/>爱好1
                <input type="checkbox" name="mylove" value="love2"/>爱好2
                <input type="text" name="myinput" value="lichanghcun">
            </p>
            <form id="myForm" action="javascript:void(0)" method="post">
                <p>
                    <label for="userName">用户名</label>
                    <input type="text" id="userName" name="userName" value="makabaka" />
                </p>
                <p>
                    <input type="hidden" name="cityId" value="1890">
                </p>
                <p>
                    <input type="text" name="cityName" value="shanghai" readonly>
                </p>
                <p>
                    <input type="text" name="localCityName" value="上海">
                </p>
                <p>
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" value="123456" />
                </p>
                <button onclick="fun01()">btn01</button>
                <button id="btn02">btn02</button>
                <button id="btn03">新增用户</button>
                <button id="btn04">修改城市</button>
            </form>
        </div>

		<script>
            //页面加载时执行的函数
			$(function () {
				jqueryTest01()

                //事件绑定
                $('#btn02').on('click', function(){
                    fun02()
                })

                $('#btn03').click(function(){
                    insertUser()
                })
                $('#btn04').click(function(){
                    updateCity()
                })
			})

            function fun01(){
                alert('sadda')
            }

            function updateCity () {
                //调用ajax函数，参数为ajax的配置属性对象
                $.ajax({
                    url:'http://www.sfac.xyz/api/city',
                    type:'put',
                    data:$('#myForm').serializeArray(),
                    success:function(result){
                        if (result.status == 200){
                            alert(result.message)
                            console.log(result.data)
                        } else {
                            alert(result.message)
                        }
                    },
                    error: function(erro){
                        console.log(erro)
                    }
                })
            }

            function fun02(){
                location.href='https://www.baidu.com'
            }
 
            function insertUser(){
                var user = {}
                user.userName = $('#userName').val()
                user.password = $('#password').val()
                
                //调用ajax函数，参数为ajax的配置属性对象
                $.ajax({
                    url:'http://www.sfac.xyz/api/user',
                    type:'post',
                    contentType:'application/json',
                    data:JSON.stringify(user),
                    success:function(result){
                        if (result.status == 200){
                            alert(result.message)
                            console.log(result.data)
                        } else {
                            alert(result.message)
                        }
                    },
                    error: function(erro){
                        console.log(erro)
                    }
                })
            } 


			function jqueryTest01() {
				console.log($ == jQuery)

                //选择器
                console.log($('#div01'))
                console.log($('#div01').html())
                console.log($('div'))
                console.log($('.mydiv'))
                console.log($('[name=div01]'))

                //div1显示隐藏域里面的值
                console.log($('#div01').html($('input[name=userid]').val()))

                //层级选择器
                console.log($('div.outdiv p input').val())

                //过滤器
                console.log($('input:hidden'))

                //text浏览器页面显示什么返回什么
                //
                console.log($('#div01').text())
                console.log($('#div01').html())
                $('#div01').html("我爱你!<span style='color:red'>中国</span>")
                //$('#div01').html("我爱你!<span style='colored:red'>中国</span>")
                //$('#div01').css('color','red')
                $('#div01').addClass('red')

                $('#div02').hide()
                //
                //console.log($(winodw).width())
                //console.log($(winodw).height())
                console.log($(document).width())
                console.log($(document).height())
                console.log($('#div01').width())
                console.log($('#div01').height())
               
                $('#div01').css('width', '100px')
                .css('height', '50px')
                .css('border','solid 1px gray')
                $('#div01').attr('data', 'lichangchun')

                $('input[type=checkbox][value=love1]').attr('checked','checked')
                $('input[type=checkbox][value=love2]').prop('checked',true)

                console.log($('[name=mylove]').attr('value'))
                console.log($('input[type=checkbox][value=love1]').attr('checked'))
                console.log($('input[type=checkbox][value=love1]').prop('checked'))

                $('#div01').append("<span style='color:red'>中国梦</ span>")

                var arr = ['sdada', 555, 'fefafa', 231]
                $.each(arr, function(i, item){
                    console.log(i + '---' + item)
                })
                
                //  序列化
                console.log($('#myForm').serializeArray());
                var user={
                    userId:1,
                    userName:'lichangchun',
                    password:'111111,'
                }
                console.log(JSON.stringify(user))
  
			}
		</script>
	</body>
</html>
